<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="screen-orientation" content="portrait" />
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <title>信息填写</title>
    <link rel="stylesheet" href="css/element_2.4.7.css"/>
    <link rel="stylesheet/less" href="css/common.less"/>
    <style>
        .is-disabled>input{color:red!important;}
    </style>
</head>
<body id="gift_info_add_body">
    <div id="app">
        <!--顶部-->
        <div class="top">
            <span>爱健康&nbsp;&nbsp;爱生活</span>
            <a href="javascript:history.go(-1);" class="return">
                <span class="return-arrow"></span>
                <span>返回&nbsp;关闭</span>
            </a>
            <a href="#" class="oprate"></a>
        </div>

        <!--头部标题-->
        <div class="head">{{headTitle}}</div>

        <!--主要内容-->
        <div class="content" id="gift_info_add">
            <el-form ref="ruleForm" class="demo-ruleForm">

                <el-form-item label="姓名" prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入您的姓名" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="性别" prop="sexual">
                    <el-radio-group v-model="ruleForm.sexual">
                        <el-radio label="1" border>男</el-radio>
                        <el-radio label="2" border>女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="地区" prop="region">
                    <el-cascader
                            :options="ruleForm.options"
                            v-model="ruleForm.region"
                            expand-trigger="click"
                            @change="handleChange"
                            class="address_input"
                    >
                    </el-cascader>
                </el-form-item>

                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="ruleForm.address" placeholder="请填写您的地址"></el-input>
                </el-form-item>

                <el-form-item label="证件类型" prop="idType">
                    <el-select v-model="ruleForm.idType" placeholder="请选择您的证件类型" :disabled="true">
                        <el-option label="身份证" value="card"></el-option>
                        <el-option label="类型2" value="page"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="证件号码" prop="idNumber" >
                    <el-input v-model="ruleForm.idNumber" placeholder="请填写您的证件号码"  class="idNumber"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="ruleForm.phoneNumber" placeholder="请填写您的手机号码"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="code">
                    <el-input v-model="ruleForm.code" placeholder="请填写右侧验证码">
                        <template slot="append">
                            <img class="code-img" src="image/code-img.png" @click="changeCode()"/>
                        </template>
                    </el-input>
                </el-form-item>

            </el-form>

            <div class="foot-btn" @click="submit()">提交</div>
        </div>
    </div>
</body>

<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false,
        rootpath: ":/a.com/"
    };
</script>
<script src="js/less.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<!-- import Vue before Element -->
<script src="js/vue_2.5.17.js"></script>
<!-- import JavaScript -->
<script src="js/element_2.4.7.js"></script>

<script src="js/select_area.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: function() {
            return {
                headTitle:'信息填写',//标题

                ruleForm: {
                    name: 'aimee不可修改',
                    sexual:'1',
                    region: ['340000', '340100', '340104'], //此处填写对应的value值
                    options: areajson,  //areajson为引入外部js文件的json数组名称
                    address:'',
                    idType: 'card',
                    idNumber:'证件号码不可修改',
                    phoneNumber:'',
                    code: ''
                }
            }
        },
        methods: {
            handleChange:function(){
                console.log('submit!');
            },
            changeCode:function(){
                alert("改变验证码");
            },
            submit:function(){
                if(this.ruleForm.name==''){
                    alert("请输入您的姓名");
                    return false;
                }
                if(this.ruleForm.sexual==''){
                    alert("请选择您的性别");
                    return false;
                }
                if(this.ruleForm.region.length==0){
                    alert("请选择您的地区");
                    return false;
                }
                if(this.ruleForm.address==''){
                    alert("请填写您的地址");
                    return false;
                }
                if(this.ruleForm.idType==''){
                    alert("请选择您的证件类型");
                    return false;
                }
                if(this.ruleForm.idNumber==''){
                    alert("请填写您的证件号码");
                    return false;
                }
                if(this.ruleForm.phoneNumber==''){
                    alert("请填写您的手机号码");
                    return false;
                }
                if(this.ruleForm.code==''){
                    alert("请填写右侧验证码");
                    return false;
                }
                alert("验证通过,已提交")
            }
        }
    });

    $(function(){
        vm.$data.ruleForm.name="aimee"//vue外部改变内部对象内容
        // $(".idNumber>input").attr("disabled","true");
    })

</script>

</html>